<template>
  <div class="financial-manage">
    <t-card title="财务管理">
      <!-- 搜索区域 -->
      <div class="search-area">
        <t-input v-model="searchKeyword" placeholder="请输入交易号/账号搜索" clearable style="width: 300px">
          <template #suffix>
            <t-icon name="search" @click="handleSearch" />
          </template>
        </t-input>
        <t-select v-model="typeFilter" placeholder="交易类型筛选" clearable style="width: 150px">
          <t-option key="all" label="全部" value="all" />
          <t-option key="income" label="收入" value="income" />
          <t-option key="expense" label="支出" value="expense" />
        </t-select>
        <t-button theme="primary" @click="handleSearch">搜索</t-button>
        <t-button theme="default" @click="handleReset">重置</t-button>
      </div>

      <t-table :data="slicedData" :columns="columns" :hover="true" :loading="false" :pagination="pagination"
        @page-change="onPageChange" row-key="id">
        <template #type="{ row }">
          <t-tag :theme="row.type === '收入' ? 'success' : 'warning'">
            {{ row.type }}
          </t-tag>
        </template>
        <template #amount="{ row }">
          <span :class="row.type === '收入' ? 'income-amount' : 'expense-amount'">
            {{ row.type === '收入' ? '+' : '-' }}¥{{ row.amount.toFixed(2) }}
          </span>
        </template>
        <template #balance="{ row }">
          <span>¥{{ row.balance.toFixed(2) }}</span>
        </template>
      </t-table>
    </t-card>
  </div>
</template>

<script setup lang="ts">
  import { ref, computed } from 'vue'
  import { 
    Card as TCard, 
    Input as TInput, 
    Button as TButton, 
    Icon as TIcon,
    Table as TTable,
    Tag as TTag,
    Select as TSelect,
    Option as TOption
  } from 'tdesign-vue-next'
  import type { PageInfo, TableRowData } from 'tdesign-vue-next'

  // 定义财务数据类型
  interface FinancialData {
    id: number;
    transactionId: string;
    date: string;
    type: '收入' | '支出';
    amount: number;
    account: string;
    description: string;
    balance: number;
  }

  // 搜索关键词
  const searchKeyword = ref('')
  
  // 类型筛选
  const typeFilter = ref<'all' | 'income' | 'expense'>('all')

  // 模拟财务数据
  const financialData = ref<FinancialData[]>([
    {
      id: 1,
      transactionId: 'TRX20240101001',
      date: '2024-01-01 10:15:30',
      type: '收入',
      amount: 1299.00,
      account: '主账户',
      description: '订单支付 #ORD20240101001',
      balance: 5000.00
    },
    {
      id: 2,
      transactionId: 'TRX20240102002',
      date: '2024-01-02 14:25:10',
      type: '收入',
      amount: 699.50,
      account: '主账户',
      description: '订单支付 #ORD20240102002',
      balance: 5699.50
    },
    {
      id: 3,
      transactionId: 'TRX20240103003',
      date: '2024-01-03 09:05:22',
      type: '支出',
      amount: 299.00,
      account: '主账户',
      description: '服务器费用',
      balance: 5400.50
    },
    {
      id: 4,
      transactionId: 'TRX20240104004',
      date: '2024-01-04 16:42:15',
      type: '支出',
      amount: 500.00,
      account: '主账户',
      description: '退款 #ORD20240104004',
      balance: 4900.50
    },
    {
      id: 5,
      transactionId: 'TRX20240105005',
      date: '2024-01-05 11:30:45',
      type: '收入',
      amount: 3999.00,
      account: '主账户',
      description: '订单支付 #ORD20240105005',
      balance: 8899.50
    },
    {
      id: 6,
      transactionId: 'TRX20240106006',
      date: '2024-01-06 08:20:33',
      type: '支出',
      amount: 1200.00,
      account: '主账户',
      description: '员工工资',
      balance: 7699.50
    },
    {
      id: 7,
      transactionId: 'TRX20240107007',
      date: '2024-01-07 13:15:50',
      type: '收入',
      amount: 899.00,
      account: '主账户',
      description: '订单支付 #ORD20240107007',
      balance: 8598.50
    }
  ])

  // 表格列配置
  const columns = [
    { colKey: 'transactionId', title: '交易号', width: 150 },
    { colKey: 'date', title: '交易时间', width: 180 },
    { colKey: 'type', title: '类型', width: 100 },
    { colKey: 'amount', title: '金额', width: 150 },
    { colKey: 'account', title: '账户', width: 120 },
    { colKey: 'description', title: '描述', width: 200 },
    { colKey: 'balance', title: '余额', width: 150 }
  ]

  // 根据关键词和类型过滤数据
  const filteredData = computed(() => {
    let result = financialData.value
    
    // 关键词筛选
    if (searchKeyword.value) {
      const keyword = searchKeyword.value.toLowerCase()
      result = result.filter(item =>
        item.transactionId.toLowerCase().includes(keyword) ||
        item.account.toLowerCase().includes(keyword) ||
        item.description.toLowerCase().includes(keyword)
      )
    }
    
    // 类型筛选
    if (typeFilter.value !== 'all') {
      const type = typeFilter.value === 'income' ? '收入' : '支出'
      result = result.filter(item => item.type === type)
    }
    
    return result
  })

  // 分页配置
  const pagination = ref({
    current: 1,
    pageSize: 10,
    total: computed(() => filteredData.value.length),
    showJumper: true,
    showPageSize: true
  })

  // 计算当前页数据
  const slicedData = computed(() => {
    const start = (pagination.value.current - 1) * pagination.value.pageSize
    const end = start + pagination.value.pageSize
    return filteredData.value.slice(start, end)
  })

  // 搜索处理
  const handleSearch = () => {
    pagination.value.current = 1 // 搜索时重置到第一页
  }

  // 重置搜索
  const handleReset = () => {
    searchKeyword.value = ''
    typeFilter.value = 'all'
    pagination.value.current = 1
  }

  // 页码改变处理
  const onPageChange = (pageInfo: PageInfo) => {
    pagination.value.current = pageInfo.current
    pagination.value.pageSize = pageInfo.pageSize
  }
</script>

<style scoped>
  .financial-manage {
    padding: 0;
  }
  
  .search-area {
    margin-bottom: 16px;
    display: flex;
    gap: 12px;
    align-items: center;
  }

  .t-button {
    margin-left: 8px;
  }

  .income-amount {
    color: #2ba471;
    font-weight: bold;
  }

  .expense-amount {
    color: #e34d59;
    font-weight: bold;
  }
</style>